<!--
 * @Author: your name
 * @Date: 2022-03-26 21:18:55
 * @LastEditTime: 2022-03-28 20:19:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \blog_web\src\views\me\Me.vue
-->

<template>
  <div class="detail">
    <h3>我的:</h3>
    <el-descriptions class="margin-top" :column="2" border size="medium">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ user.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          状态
        </template>
        <!-- {{ user.status }} -->
        <el-tag :type="user.status == 0 ? 'danger' : 'success'">
          {{ user.status == 1 ? '有效' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          电话
        </template>
        {{ user.telephone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          创建时间
        </template>
        {{ $moment(user.create_time).format('YYYY-MM-DD HH:mm:ss') }}
        <!-- <el-tag size="small">学校</el-tag> -->
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          是否管理员
        </template>
        {{ user.is_root == 1 ? '管理员' : '普通用户' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          密码
        </template>
        {{ user.remark }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          密码
        </template>
        <el-input placeholder="请输入新密码" v-model="password" clearable>
          <template slot="append">
            <el-button type="danger" plain @click="resetPwd"
              >修改密码</el-button
            >
          </template>
        </el-input>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 关注的用户 -->
    <h3>关注:</h3>
    <div v-if="followList.length > 0" class="follow-container">
      <el-row class="follow-row">
        <el-col v-for="(item, index) in followList" :key="item.id" :span="8">
          <img :src="item.follow.avatar" alt="" class="follow-img" />
          <span class="follow-name">{{ item.follow.name }}</span>
          <el-button
            type="danger"
            round
            class="btn"
            size="small"
            plain
            @click="cancelFollow(item, index)"
            >取关</el-button
          >
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
    </div>
    <div v-else>你还没有关注</div>
    <!-- 发布的微博 -->
    <h3>博文:</h3>
    <el-button
      type="success"
      @click="releaseBlog"
      size="small"
      class="release-btn"
      >发布博文</el-button
    >
    <template v-if="blogs.length > 0">
      <div v-for="(item, index) in blogs" :key="item.id" class="blog-container">
        <span class="blog-title">文章{{ index }}:{{ item.article_title }}</span>
        <div class="btns">
          <el-button
            type="success"
            plain
            round
            @click="blogDetail(item)"
            size="small"
            >详情</el-button
          >
          <el-button
            type="danger"
            plain
            round
            @click="deleteBlog(item, index)"
            size="small"
            >删除</el-button
          >
        </div>
      </div>
    </template>
    <!-- 新增博客和编辑 -->
    <create-blog :createDialogVisible.sync="createDialogVisible" />
  </div>
</template>

<script>
// 导入本地存储的函数
import db from '@/util/localstorage'
// 导入用户的关注接口
import { getFollowList, deleteFollow } from '@/api/follow.js'
// 导入重置密码的接口
import { resetPwd } from '@/api/user.js'
// 博文列表的接口
import { getBlogList, deleteBlog } from '@/api/blog.js'
// 导入新增博文的组件
import CreateBlog from './components/createblog.vue'
export default {
  name: 'Me',
  props: {
    meDialogVisible: { type: Boolean, default: false }
  },
  components: {
    CreateBlog
  },
  data() {
    return {
      createDialogVisible: false,
      user: {},
      follow: [],
      password: '',
      blogs: []
    }
  },
  computed: {
    followList() {
      return this.$store.state.follow.follows
    }
  },
  created() {
    this.user = db.get('user')
    this.$store.dispatch('follow/getList', { id: this.user.id })
    // 获取关注人的信息
    // getFollowList({ id: this.user.id }).then(res => {
    //   console.log("关注res", res);
    //   this.follow = res.result;
    //   this.$store.commit("follow/setFollows", res.result);
    // });
    // 获取博客的列表
    getBlogList({ id: this.user.id }).then((res) => {
      this.blogs = res.result.result
    })
  },
  methods: {
    // 关闭组件
    closeDialog() {
      this.$emit('update:meDialogVisible', false)
    },
    // 取消关注
    cancelFollow(item, index) {
      console.log('item', item)
      let { id: follow_id } = item.follow
      this.$confirm(`将取关该用户, 是否继续?`, '删除', {
        type: 'warning'
      }).then(() => {
        deleteFollow({ follow_id }).then((res) => {
          if (res.code == 200) {
            this.$message.success('取关成功')
            // 该为用vuex 存储
            this.$store.commit('follow/deleteFollow', index)
          }
        })
      })
    },
    // 重置密码
    resetPwd() {
      console.log('重置密码', this.password)
      resetPwd({ password: this.password }).then((res) => {
        console.log('重置密码', res)
        if (res.code == 200) {
          this.$message.success('重置成功,请重新登录')
          // 退出登录
          db.clear()
          this.$router.push('/')
        }
      })
    },
    // 博文详情
    blogDetail(item) {
      console.log('博文详情', item)
      this.closeDialog()
      this.$router.replace(`/home/article/${item.id}`)
    },
    // 删除博文
    deleteBlog(item, index) {
      console.log('删除博文', item, index)
      this.$confirm(`将删除该博文, 是否继续?`, '删除', {
        type: 'warning'
      }).then(() => {
        deleteBlog({ id: item.id }).then((res) => {
          console.log('res', res)
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.blogs.splice(index, 1)
          }
        })
      })
    },
    // 发布博文
    releaseBlog() {
      console.log('发布博文')
      this.createDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  padding: 0 30px 30px 20px;
}
.release-btn {
  margin-bottom: 10px;
}
.detail {
  .follow-container {
    .follow-row {
      .follow-img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        vertical-align: middle;
        margin-bottom: 20px;
      }
      .follow-name {
        font-size: 16px;
        margin-left: 6px;
      }
      .btn {
        margin-left: 10px;
      }
    }
  }
  .blog-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .blog-title {
      font-size: 17px;
    }
  }
}
</style>
